<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>书籍管理 / 书籍列表</span>
                <Button type="info" ghost icon="md-add" @click="addBookVisable=true">添加书籍</Button>
            </p>
            <!--书籍列表-->
            <div>
                <List size="large">
                    <ListItem v-for="(book,index) in bookList" :key="index">
                        <ListItemMeta
                                :avatar="book.bpicture"
                                :title="book.bname" :description="book.bdiscrible"/>
                        <span style="margin-right: 4%">推荐日期：{{book.bBooktime}}</span>
                        <template slot="action">
                            <Button type="warning" ghost icon="md-create" size="small" @click="editBook(book)">编辑
                            </Button>
                            <Button style="margin-left: 10px;" type="error" ghost icon="md-trash" size="small"
                                    @click="deleteBook(book.bid)">删除
                            </Button>
                        </template>
                    </ListItem>
                </List>
            </div>
        </Card>
        <!--添加书籍对话框-->
        <Modal v-model="addBookVisable" title="添加书籍" footer-hide>
            <Form ref="addBookRef" :model="bookItem" :rules="bookRule" :label-width="120">
                <FormItem label="书名:" prop="name">
                    <Input v-model="bookItem.name" placeholder="请输入书名"/>
                </FormItem>
                <FormItem label="书籍描述:" prop="des">
                    <Input v-model="bookItem.des" type="textarea"
                           placeholder="请输入书籍描述" maxlength="250" show-word-limit :rows="4"/>
                </FormItem>
                <FormItem label="上传封面:">
                    <img style="width: 100px;height: 133px" :src="bookItem.picUrl" alt="">
                    <Upload action="http://localhost:8080/edwardBlog/book_pic" :headers="uploadHeader"
                            :on-success="uploadSuccess">
                        <Button icon="ios-cloud-upload-outline">Upload picture</Button>
                    </Upload>
                </FormItem>
                <Button type="success" long @click="addBook('addBookRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="addBookVisable=false">取消</Button>
            </Form>
        </Modal>
        <!--编辑书籍对话框-->
        <Modal v-model="editBookVisable" title="添加书籍" footer-hide>
            <Form ref="editBookRef" :model="editBookItem" :rules="editBookRule" :label-width="120">
                <FormItem label="书名:" prop="name">
                    <Input v-model="editBookItem.name" placeholder="请输入书名"/>
                </FormItem>
                <FormItem label="书籍描述:" prop="des">
                    <Input v-model="editBookItem.des" type="textarea"
                           placeholder="请输入书籍描述（【作者名 | 出版社 | 价格】）" maxlength="250" show-word-limit :rows="4"/>
                </FormItem>
                <FormItem label="上传封面:">
                    <img style="width: 100px;height: 133px" :src="editBookItem.newPicUrl" alt="">
                    <Upload action="http://localhost:8080/edwardBlog/book_pic" :headers="uploadHeader"
                            :on-success="updateLoadSuccess">
                        <Button icon="ios-cloud-upload-outline">Upload picture</Button>
                    </Upload>
                </FormItem>
                <Button type="success" long @click="updateBook('editBookRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="editBookVisable=false">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadHeader: {
          type: 'back',
          lhamster_identity_info: window.sessionStorage.getItem('lhamster_identity_info')
        },
        // 添加书籍参数
        bookItem: {
          name: '',
          des: '',
          picUrl: ''
        },
        // 书籍列表
        bookList: [],
        // 书籍弹出层显示与关闭
        addBookVisable: false,
        editBookVisable: false,
        // 添加书籍表单rule
        bookRule: {
          name: [
            { required: true, message: '书籍名不能为空', trigger: 'blur' }
          ],
          des: [
            { required: true, message: '书籍描述不能为空', trigger: 'blur' }
          ]
        },
        editBookRule: {
          name: [
            { required: true, message: '书籍名不能为空', trigger: 'blur' }
          ],
          des: [
            { required: true, message: '书籍描述不能为空', trigger: 'blur' }
          ]
        },
        // 更新书籍参数
        editBookItem: {
          id: 0,
          name: '',
          des: '',
          newPicUrl: ''
        }
      }
    },
    mounted() {
      this.getBooks()
    },
    methods: {
      // 查询书籍
      getBooks() {
        this.$http.get('books').then(res => {
          res = res.data
          if (res.code === 0) {
            this.bookList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 删除书籍
      deleteBook(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该书籍吗？',
          onOk: () => {
            this.$http.delete(`book?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6230) {
                this.$Message.success(res.msg);
                this.getBooks();
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 书籍封面上传成功
      uploadSuccess(res) {
        if (res.code === 6201) {
          this.bookItem.picUrl = res.data;
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg)
        }
      },
      updateLoadSuccess(res) {
        if (res.code === 6201) {
          this.editBookItem.newPicUrl = res.data;
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg)
        }
      },
      // 添加书籍
      addBook(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return;
          this.$http.post('book', new URLSearchParams(this.bookItem)).then(res => {
            res = res.data;
            if (res.code === 6210) {
              this.$Message.success(res.msg);
              this.getBooks();
              this.addBookVisable = false;
              this.$refs[name].resetFields()
              this.bookItem.picUrl = ''
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      },
      // 编辑书籍
      editBook(row) {
        this.editBookItem.id = row.bid;
        this.editBookItem.name = row.bname;
        this.editBookItem.des = row.bdiscrible;
        this.editBookVisable = true;
      },
      // 更新书籍
      updateBook(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return;
          this.$http.put('book', new URLSearchParams(this.editBookItem)).then(res => {
            res = res.data;
            if (res.code === 6220) {
              this.$Message.success(res.msg);
              this.editBookItem.id = 0;
              this.editBookItem.name = '';
              this.editBookItem.des = '';
              this.editBookItem.newPicUrl = '';
              this.getBooks();
              this.editBookVisable = false;
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
